<template>
  <div id="container"></div>
</template>
<script setup>
// 新增：
// 1. 需要将传入的具体地址，转换为经纬度，并标在地图上
// 2. 需要将对应的经纬度，返回给父组件，让父组件回显
// 3. 用户可以点击地图，微调经纬度

// 编辑：
// 1. 将用户传入的经纬度，直接标在地图上
// 2. 当用户更改了具体地址，根据地址重新生成经纬度
// 3. 用户可以点击地图微调经纬度
import AMapLoader from '@amap/amap-jsapi-loader'
import { onBeforeUnmount, onMounted } from 'vue'

// geocoder的实例
let geocoder = null
// 地图marker的实例
let marker = null
// 地图的实例
let map = null
// 阿里地图的实例
let AMap = null

onMounted(async () => {
  await initMap()
  // 新增的时候，根据地址来换出经纬度，并居中
  //   geoCode('重庆市巴南区重庆工程学院')

  // 编辑的时候，根据经纬度，直接居中
  const lnglatArray = [106.596025, 29.425427]
  centerMarker(lnglatArray)
})

onBeforeUnmount

const initMap = async () => {
  // 1. 设置安全密钥
  window._AMapSecurityConfig = {
    securityJsCode: '38688a0c4ce0f0086f89f37604742be3'
  }
  // 2. 调用AMapLoader下的load方法，生成AMap的实例
  AMap = await AMapLoader.load({
    key: 'e3865dc302b90449367bfb092831191d', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Geocoder'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
  // 3. 生成地图
  map = new AMap.Map('container', {
    // 设置地图容器id
    viewMode: '3D', // 是否为3D地图模式
    zoom: 11 // 初始化地图级别
    // center: [116.397428, 39.90923] // 初始化地图中心点位置，不指定中心点，则以当前城市为中心
  })
  // 4. 生成geocoder 地址转坐标工具的实例
  geocoder = new AMap.Geocoder({})
  // 5. 生成地图标点的实例
  marker = new AMap.Marker()
  // 6. 绑定点击事件
  map.on('click', (e) => {
    console.log(e.lnglat.toArray())
    marker.setPosition(e.lnglat)
  })
}

// 定位marker，并将marker添加到地图上，并居中
function centerMarker(lnglat) {
  // 将坐标设置为marker的坐标
  marker.setPosition(lnglat)
  // 将坐标添加到地图上
  map.add(marker)
  // 让地图根据坐标居中
  map.setFitView(marker)
}
// 具体geoCoder的使用
function geoCode(address) {
  // 先拿到具体的地址
  // 然后再使用geocoder的实例下的getLocation方法，传入地址和回调函数
  geocoder.getLocation(address, function (status, result) {
    if (status === 'complete' && result.geocodes.length) {
      // 拿到具体的坐标
      var lnglat = result.geocodes[0].location
      centerMarker(lnglat)
    } else {
      console.error('根据地址查询位置失败')
    }
  })
}
</script>
<style lang="less" scoped>
#container {
  height: 100%;
}
</style>
